<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar
      title="详情页"
      left-arrow
      @click-left="toBack"
    />
    <!-- 轮播 -->
    <Banner :images="item.banners || []" />

    <!-- 商品 -->
    <h3>{{ item.title }}</h3>
    <h4>{{ item.price }}</h4>


    <!-- 底部 导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCar"/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>


<script>
import axios from "axios";
import Banner from "@/components/Banner";
export default {
  name: "Detail",
  data() {
    return {
      // 详情
      item: {}
    };
  },
  components: {
    Banner
  },
  methods: {
    toBack() {
      // 返回上一页
      this.$router.back()
    },
    // 加入购物车
    addCar() {
      console.log(this.item);
      // 获取本地存储 购物车数据
      const cars = JSON.parse(localStorage.getItem('cars')) || []
      // 寻找商品id 是否在购物车里面
      const o = cars.find(v => v.id === this.item.id)
      // 判断是否找到商品
      if(o) {
        // 存在 数量+1
        o.count++
      } else {
        // 不存在推入新数据
        // 并且数量为1
        cars.push({ ...this.item, count: 1 })
      }
   
      // 保存数据
      localStorage.setItem('cars', JSON.stringify(cars))
    }
  },  
  created() {
    // 获取id
    const { id } = this.$route.params;
    // 请求详情数据
    axios.post("/detail", { id }).then(resp => {
      console.log(resp.data);
      this.item = resp.data.data;
    });
  }
};
</script>